//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Divider, Tag } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import styles from './Emphasis.less';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
let dragingIndex = -1;
class BodyRow extends React.Component {
    render() {
        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;

        const style = { ...restProps.style, cursor: 'move' };

        let { className } = restProps;
        if (isOver) {
            if (restProps.index > dragingIndex) {
                className += ' drop-over-downward';
            }
            if (restProps.index < dragingIndex) {
                className += ' drop-over-upward';
            }
        }
        // console.log(this.props)
        return connectDragSource(

            connectDropTarget(<tr {...restProps} className={className} style={style} />),
        );
    }
}

const rowSource = {
    beginDrag(props) {
        dragingIndex = props.index;
        return {
            index: props.index,
        };
    },
};

const rowTarget = {
    drop(props, monitor) {
        console.log(props, monitor.getItem())
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;//选中项的index

        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
            return;
        }

        // Time to actually perform the action//实际操作时间
        props.moveRow(dragIndex, hoverIndex);
        //注意:我们正在修改监视器项!
        //一般来说，避免突变比较好，
        //但是这里是为了表现好
        //为了避免昂贵的索引搜索。
        // Note: we're mutating the monitor item here!
        // Generally it's better to avoid mutations,
        // but it's good here for the sake of performance
        // to avoid expensive index searches.
        monitor.getItem().index = hoverIndex;
    },
};


const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
}))(
    DragSource('row', rowSource, connect => ({
        connectDragSource: connect.dragSource(),
    }))(BodyRow),
);

class DataModel extends Component {
    state = {
        data: [
            {

                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
                width: 150,
                align:'center'
            },
            {

                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                width: 150,
                align:'center'
            },
            {

                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
                width: 150,
                align:'center'
            },
        ],
        dataRight: [
            {

                name: 'John Brown',
                age: '1columnsRight',
                width: 150,
            },
            {

                name: 'Jim Green',
                age: '2columnsRight',
                width: 150,
            },
            {

                name: 'Joe Black',
                age: '3columnsRight',
                width: 150,
            },
            {

                name: 'John Brown',
                age: '4columnsRight',
                width: 150,
            },
            {

                name: 'Jim Green',
                age: '5columnsRight',
                width: 150,
            },
            {

                name: 'Joe Black',
                age: '6columnsRight',
                width: 150,
            },
            {

                name: 'John Brown',
                age: '7columnsRight',
                width: 150,
            },
            {

                name: 'Jim Green',
                age: '8columnsRight',
                width: 150,
            },
            {

                name: 'Joe Black',
                age: '9columnsRight',
                width: 150,
            },
            {

                name: 'John Brown',
                age: '10columnsRight',
                width: 150,
            },
            {

                name: 'Jim Green',
                age: '11columnsRight',
                width: 150,
            },
            {

                name: 'Joe Black',
                age: '12columnsRight',
                width: 150,
            },
        ]
    };

    componentDidMount() {
        this.props.history.listen(() => {
            console.log(this.props)
        })
    }

    components = {
        body: {
            row: DragableBodyRow,
        },
    };

    moveRow = (dragIndex, hoverIndex) => {
        console.log('moveRow : ', dragIndex, hoverIndex)
        const { data } = this.state;
        const dragRow = data[dragIndex];
        /**
         * API: {$splice: array of arrays}
         * 同数组的 splice 方法
         *      数组 arrays 中包含的是所有需要执行的操作集合
         *      元素 array 中第一个元素代表下标，第二个元素代表需要删除的个数，第三个元素代表需要插入到 initialArray 中的的元素
         * 
         * PS:  1、可以在 arrays 中执行多个集合；
         *      2、两个操作不是同时执行，而是按顺序执行，后面的操作会在前面一个操作的执行结果上执行
         */

        this.setState(
            update(this.state, {
                data: {
                    $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],//[dragIndex, 1] 删除拖动列,[hoverIndex, 0, dragRow]将拖动列添加到移动结束的位置
                },
            }),
        );
    };
    onDelete = (text, record, index) => {
        console.log(text, record, index)
        this.setState(
            update(this.state, {
                dataRight: {
                    $splice: [[0, 0, this.state.data[index]]],//[dragIndex, 1] 删除拖动列,[hoverIndex, 0, dragRow]将拖动列添加到移动结束的位置
                },
                data: {
                    $splice: [[index, 1]],
                },
            }),
        );
    }

    onAddend = (text, record, index) => {
        console.log(text, record, index)

        this.setState(
            update(this.state, {
                data: {
                    $splice: [[0, 0, this.state.dataRight[index]]],//[dragIndex, 1] 删除拖动列,[hoverIndex, 0, dragRow]将拖动列添加到移动结束的位置
                },
                dataRight: {
                    $splice: [[index, 1]],
                },
            }),
        );

        // this.setState(
        //     update(this.state, {

        //     }),
        // )
    }
    render() {
        const columns = [
            {
                title: '序号',
                dataIndex: 'name',
                key: 'name',
                width: 150,
                align:'center',
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: '表头',
                dataIndex: 'age',
                key: 'age',
                width: 150,
                align:'center',
            },
            {
                title: '操作',
                dataIndex: 'address',
                key: 'address',
                width: 150,
                align:'center',
                render: (text, record, index) => <span>
                    <a style={{ marginLeft: 5 }} href="javascript:;" onClick={this.onDelete.bind(this, text, record, index)}>删除</a>

                </span>
            },
        ];

        const columnsRight = [
            {
                title: '序号',
                dataIndex: 'name',
                key: 'name',
                width: 150,
                align:'center',
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: '表头',
                dataIndex: 'age',
                key: 'age',
                width: 150,
                align:'center',
            },
            {
                title: '操作',
                dataIndex: 'address',
                key: 'address',
                width: 150,
                align:'center',
                render: (text, record, index) => <span>
                    <a style={{ marginLeft: 5 }} href="javascript:;" onClick={this.onAddend.bind(this, text, record, index)}>添加</a>

                </span>
            },
        ];
        console.log(this.state.data)
        return (

            <div className={styles.warp}>
                <div style={{ flex: 1,overflow:'auto' }}>
                    <DndProvider backend={HTML5Backend}>
                        <Table
                        scroll={{ y: 500 }}
                            pagination={false}
                            columns={columns}
                            dataSource={this.state.data}
                            components={this.components}
                            onRow={(record, index) => ({
                                index,
                                moveRow: this.moveRow,
                            })}
                        />
                    </DndProvider>
                </div>
                <Divider type="vertical" style={{ height: '100%' }} />
                <div style={{ flex: 1 }}>
                    <Table columns={columnsRight} dataSource={this.state.dataRight} />

                </div>


            </div>
        )
    }


}

export default connect()(DataModel)